{% extends "base.html" %}

{% block extrastyle %}
<link rel="stylesheet" href="/static_media/sig/jquery.signaturepad.css">
{% endblock %}

{% block extrahead %}
<script src="/static_media/sig/jquery.min.js"></script>
{% endblock %}

{% block title %}Sign a Waiver{% endblock %}
{% block crumb %}&rsaquo; Sign waiver{% endblock %}

{% block content %}
  <h1>Signing Waiver {{ name }}</h1>

  {% if message %}
    <p>{{message}}</p>
  {% endif %}

  <p>{{ content }}</p>

  <p>
    <form action="" method="post" class="sigPad">{% csrf_token %}
       {% for field in form %}
         <div class="fieldWrapper">
           {{ field.errors }}
           {% if not field.label == 'output' %}
            {{ field.label_tag }} {{ field }}
           {% else %}
                <p class="drawItDesc">Draw your signature</p>
                <ul class="sigNav">
                    <li class="drawIt"><a href="#draw-it" >Draw It</a></li>
                    <li class="clearButton"><a href="#clear">Clear</a></li>
                </ul>
                <div class="sig sigWrapper">
                    <div class="typed"></div>
                    <canvas class="pad" width="198" height="55"></canvas>
                    <input type="hidden" name="output" class="output">
		</div>
		<button type="submit">I accept the terms of this agreement.</button>
           {% endif %}
        </div>
    {% endfor %}
    </form>
  
	<script src="/static_media/sig/jquery.signaturepad.min.js"></script>
	<script>
		$(document).ready(function(){
			$('.sigPad').signaturePad({drawOnly:true});
		});
	</script>
	<script src="/static_media/sig/json2.min.js"></script>

  </p>
{% endblock %}